<script setup>
import TopBar from './TableComponents/TopBar.vue';
import LeftAside from './TableComponents/LeftAside.vue';
import TableContent from './TableComponents/TableContent.vue';
</script>

<template>
    <!-- 最外层容器 -->
    <div class="iot_wrap">
        <div class="iot_header">
            <TopBar></TopBar>
        </div>
        <div class="iot_main">
            <div class="iot_leftaside">
                <LeftAside></LeftAside>
            </div>
            <div class="iot_tablecontent">
                <TableContent></TableContent>
            </div>
        </div>
    </div>
</template>

<style lang="css" scoped>
    .iot_wrap{
        position: relative;
        width: 100%;
        height: 90vh;
        display: flex;
        flex-direction: column;
        background-color: antiquewhite;
    }
    .iot_header{
        z-index: 999;
        width: 100%;
        height: 12.4vh;
        background-color: #fff;
        position: fixed;
        top: 0;
    }
    .iot_main{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 12vh;
        display: flex;
    }
    .iot_leftaside{
        width: 9vw;
        height: 90vh;
        background-color: #E8B86D;
    }
    .iot_tablecontent{
        width: 90vw;
    }
</style>
